const left = document.querySelector(".left");
const img_al = document.querySelector(".images");
const page_arr = document.querySelector(".page_arr");
const butList = page_arr.querySelectorAll("input");
const defaultAlbum = img_al.querySelector(".default");

// 加载页面时只显示首页、第一页及尾页三个按钮，选中第一个按钮
function defaultPageArr(){
  for(let i=2; i<4; i++){
    butList[i].style.display="none";
  }
  butList[1].style.background="#aaa";
  for(let i=1; i<4; i++){
    butList[i].value = i;
  }
}
window.onload = defaultPageArr();

//创建相册
function createAlbum(){
  let name=prompt("请输入相册名称","abc");
  const a_al = left.querySelectorAll("a");       //防止相册重名
  for (let i=0; i<a_al.length; i++){
    if(a_al[i].innerText == name){
      alert("相册名称重复，请重新输入。");
      name = "";
    }
  }
  if (name != null && name != ""){              //相册名不能为空值
    const active_a = left.querySelector(".active");
    active_a.className = "";

    const album = document.createElement("div");   //新建相册左侧的链接
    album.className = "album";
    album.innerHTML = `
            <img src="../images/img.jpg" alt="">
            <a href="#" onclick="select_a()" class = "active">${name}</a>
            <button type="button" name="but_x" onclick="deleteAlbum(this)">X</button>
            `;
    left.appendChild(album);
    // console.log(album);

    img_al.querySelector(".show").classList.remove("show");   //隐藏显示的相册
    const img_cont = document.createElement("div");   //新建相册右侧显示的图片集
    img_cont.className = name + " show";
    img_al.appendChild(img_cont);
    // console.log(img_al);
  }
  defaultPageArr();                       //初始化page_arr
}

//删除相册
function deleteAlbum(btn){
  if (btn.previousElementSibling.className === "active"){  //若被删相册是当前显示的相册则
    btn.parentElement.remove();                         //删除所选相册的链接和图片集
    img_al.querySelector(".show").remove();
    left.querySelector("a").classList.add("active");    //选中默认相册的链接
    defaultAlbum.classList.add("show");                 //显示默认相册的第一页
    reloadPageArr(1);
  }else{
    btn.parentElement.remove();                         //删除所选相册的链接和图片集
    let albumName = btn.previousElementSibling.innerText;
    const a_div = img_al.querySelectorAll("div");
    for (let i=1; i<a_div.length; i++){             //查询链接对应显示的图片集
      if(a_div[i].className == albumName){
        a_div[i].remove();
      }
    }
  }
}

//添加图片
function readImage(img){
  const pdiv = document.createElement("div");    //新建图片框
  pdiv.innerHTML='<button type="button" class="butd" onclick="deleteImg(this)">X</button>';
  pdiv.insertAdjacentElement("afterbegin", img);
  pdiv.classList.add("visible");
  img_al.querySelector(".show").appendChild(pdiv);

  // 显示新加入图片并更新页码
  reloadPageArr();
}

//删除图片及图片框
function deleteImg(btn){
  if (btn.parentElement.nextElementSibling){    //被删图片不是最后一个则
    btn.parentElement.remove();                 //删除图片及图片框
    const visible_al = img_al.querySelectorAll(".visible");
    let imgdiv_num = img_al.querySelectorAll(".show > div").length;
    if (visible_al.length === 2){
      if (visible_al[1].nextElementSibling){    //若可显示图片有3个则
        visible_al[1].nextElementSibling.classList.add("visible");
        reloadPageArr(Math.ceil(getChildrenIndex(visible_al[1])/3));                //显示当前页
      }                        //若可显示图片只有2个则表示显示的是最后一页所以无动作
    }                         //=1时表示被删图片是倒数第二个且显示的是最后一页所以无动作
  }else{                                  //被删图片是最后一个则
    btn.parentElement.remove();
    reloadPageArr();                      //显示最后一页
  }
}

//相册切换
function select_a(){
  const a = window.event.target;
  console.log(a);
  left.querySelector(".active").className = "";   //选定相册链接
  a.className = "active";

  if(a.innerText != "default"){
    img_al.querySelector(".show").classList.remove("show");  //隐藏当前显示的图片集
    const a_div = img_al.querySelectorAll("div");
    // console.log(a_div);
    for (let i=1; i<a_div.length; i++){             //查询链接对应显示的图片集
      if(a_div[i].className == a.innerText){
        a_div[i].classList.add("show");
      }
    }
  }else{
    img_al.querySelector(".show").classList.remove("show");  //隐藏当前显示的图片集
    img_al.querySelector("div").classList.add("show");
  }
  reloadPageArr(1);                            //显示所选相册的第一页
  console.log(img_al);
}

//更新相册某页
function reloadPageArr(pageNum = 0){
  let imgIndex = img_al.querySelectorAll(".show > div").length;
  let totalPageNum = Math.ceil(imgIndex/3);
  for(let i=1; i<4; i++){
    butList[i].value= i;
    butList[i].style.display="none";
    butList[i].style.background="";
  }
  if (pageNum >0 &&pageNum != totalPageNum){
    if (imgIndex > 6){
      for(let i=1; i<4; i++){
        butList[i].style.display="";
      }
    }else if (imgIndex > 3){
      butList[1].style.display="";
      butList[2].style.display="";
    }else{
      butList[1].style.display="";
    }
    showPage(pageNum);
    if(pageNum ==1){
      butList[1].style.background="#aaa";
    }else{
      butList[2].style.background="#aaa";
    }
  }else{
    if (pageNum == 0){
      pageNum = totalPageNum;
    }
    showPage(pageNum);
    if (imgIndex > 9){
      for(let i=3; i>0; i--){
        butList[i].style.display="";
        butList[i].value= pageNum;
        pageNum--;
      }
      butList[3].style.background="#aaa";
    }else if (imgIndex > 6){
      for(let i=3; i>0; i--){
        butList[i].style.display="";
      }
      butList[3].style.background="#aaa";
    }else if (imgIndex > 3){
      butList[1].style.display="";
      butList[2].style.display="";
      butList[2].style.background="#aaa";
    }else{
      butList[1].style.display="";
      butList[1].style.background="#aaa";
    }
  }
}

//显示特定页面的图片
function showPage(pageNum){
  const imgdiv_al = img_al.querySelectorAll(".show > div");
  let totalPageNum = Math.ceil(imgdiv_al.length/3);
  let remainingImgs = imgdiv_al.length%3;
  const visible_al = img_al.querySelectorAll(".visible");
  for (let i=0; i<visible_al.length; i++){
    visible_al[i].classList.remove("visible");
  }
  if (remainingImgs === 0){
    if (imgdiv_al.length!=0){        //当显示的图片有三个时
      for (let i=0; i<3; i++){
        imgdiv_al[3*(pageNum-1)+i].classList.add("visible");
      }
    }else{                               //若无图片则初始化图片集
      defaultPageArr();
    }
  }else if (pageNum == totalPageNum){   //若显示的是首页或尾页的1-2个图片
    for (let i=0; i<remainingImgs; i++){
      imgdiv_al[3*(pageNum-1)+i].classList.add("visible");
    }
  }else{
      // console.log(333);
      for (let i=0; i<3; i++){
        imgdiv_al[3*(pageNum-1)+i].classList.add("visible");
      }
  }
}

//页码按钮onclick函数
function toP1(but){
  showPage(1);
  for(let i=1; i<4; i++){
    butList[i].value = i;
    but = but.nextElementSibling;
    butList[i].style.background="";
  }
  butList[1].style.background="#aaa";
  // console.log(img_al);
}

function showImg(but){
  showPage(but.value);
  for(let i=1; i<4; i++){
    butList[i].style.background="";
  }
  but.style.background="#aaa";
}

function roll_show(but){
  showPage(but.value);
  changePageNumAndColor(but);
}

function toPL(but){
  let imgIndex = img_al.querySelectorAll(".show > div").length;
  let lastPage = Math.ceil(imgIndex/3);
  showPage(lastPage);
  butList[3].style.background="#aaa";
  reloadPageArr(lastPage);
  // console.log(img_al);
}

//更改页码
function changePageNumAndColor(but){
  const imgdiv_al = document.querySelectorAll(".show > div");
  let totalPageNum = Math.ceil(imgdiv_al.length/3);
  for(let i=1; i<4; i++){
    butList[i].style.background="";
  }
  if(but.value == totalPageNum){
    butList[3].style.background="#aaa";
  }else if (getChildrenIndex(but) == 3 && but.value < totalPageNum){
    butList[1].value = butList[2].value;
    butList[2].value = butList[3].value;
    ++butList[3].value;
    butList[2].style.background="#aaa";
  } else if (getChildrenIndex(but) == 1 && but.value > 1){
    butList[3].value = butList[2].value;
    butList[2].value = butList[1].value;
    --butList[1].value;
    butList[2].style.background="#aaa";
  }else{
    butList[1].style.background="#aaa";
  }
}

//得到元素的序号
function getChildrenIndex(ele){
  let i=0;
  while(ele = ele.previousElementSibling){
    i++;
  }
  return i;
}
